<template>
  <div class="hello">
    {{num}}{{string}}
    <p v-html="baidu"></p>
    <a v-bind:href="jd">京东</a>
    <a :href="tb">淘宝</a>
    <!-- 事件 -->
    <button v-on:click="setNum">修改数字1</button>
    <button @click="setNum">修改数字2</button>
    <!--
      v-show与v-if的区别
      v-show:不管条件是否成立  都加载标签  但是对于不符合条件的标签会设置他的style为不可见
      v-if:只会加载符合条件的标签
     -->
    <!-- if 条件判断 -->
     <p v-if="num<12">比12小</p>
     <p v-else-if="num == 12">等于12</p>
     <p v-else>大于12</p>
      <!-- v-show -->
      <p v-show="num!=12">不是12</p>
      <p v-show="num == 12">是12</p>

      <!-- 遍历一个表格 -->
      <!-- 遍历单个对象 -->
      <table border="1px">
        <tr>
          <td v-for="(value,key,index) in user" :key="index">{{key}}{{value}}</td>
        </tr>
      </table>

      <table border="1px">
        <tr>
          <td v-for="(value,index) in arr" :key="index">{{value}}</td>
        </tr>
      </table>


      <!-- 遍历数组对象 -->
      <table border="1px">
        <tr v-for="(user,index) in users" :key="index">
            <td v-for="(value,key,index) in user" :key="index">{{value}}</td>
        </tr>
      </table>


      <!-- 双向数据绑定 -->
      <table border="1px">
          <tr>
            <td>账号</td>
            <td><input type="text" v-model="login.uname"/></td>
          </tr>
          <tr>
            <td>密码</td>
            <td><input type="text" v-model="login.password"/></td>
          </tr>
          <tr>
            <td colspan="2"><button>提交</button></td>
          </tr>
      </table>
      {{login}}

      <!--  样式绑定 -->
       <p class="bkColor fontColor">1234</p>
       <!-- vue动态绑定  -->
       <p :class="{'bkColor':bkColorFlag,'fontColor': fontColorFlag}">1234</p>

        <button @click="setFontColor">修改字体颜色</button>

  </div>
</template>

<script>
export default {
  //vue的名称
  name: 'HelloWorld',
  //变量存放位置
  data(){
    return{
      num:2021,
      string:"你好陌生人",
      baidu:"<a href='http://www.baidu.com'>百度一下</a>",
      jd:"http://jd.com",
      tb:"http://taobao.com",
      bkColorFlag:true,
      fontColorFlag:false,


  login:{
        uname:"111",
        password:"222"
      },


      user:{
        id:1,
        name:"张三",
        age:20
      },

      users:[{
        id:1,
        name:"张三",
        age:20
      },{
        id:2,
        name:"李四",
        age:25
      },{
        id:3,
        name:"王五",
        age:28
      }],

      arr:[1,2,3,4,5]

    }
  },
  methods:{
    setNum(){
      this.num = 12;
      this.string = "我很好";
    },
    setFontColor(){
       this.fontColorFlag = !this.fontColorFlag;
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .bkColor{
        background-color: aquamarine;
    }
    .fontColor{
      color: red;
    }
</style>
